﻿<div class="container">
    <h1>Simple multicol example</h1>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
        Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet
        sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
        Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
        ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
        quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
    </p>

    <p>
        Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit
        amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
        elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
        cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
        dis parturient montes, nascetur ridiculus mus.
    </p>
</div>

<div class="container2">
    <div class="card">
        <h2>I am the heading</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
            vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
            tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
            vel, viverra egestas ligula.
        </p>
    </div>

    <div class="card">
        <h2>I am the heading</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
            vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
            tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
            vel, viverra egestas ligula.
        </p>
    </div>

    <div class="card">
        <h2>I am the heading</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
            vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
            tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
            vel, viverra egestas ligula.
        </p>
    </div>

    <div class="card">
        <h2>I am the heading</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
            vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
            tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
            vel, viverra egestas ligula.
        </p>
    </div>

    <div class="card">
        <h2>I am the heading</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
            vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
            tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
            vel, viverra egestas ligula.
        </p>
    </div>

    <div class="card">
        <h2>I am the heading</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
            vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
            tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
            vel, viverra egestas ligula.
        </p>
    </div>

    <div class="card">
        <h2>I am the heading</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
            vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
            tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
            vel, viverra egestas ligula.
        </p>
    </div>


</div>

 <style>
    .container {
      column-count: 3;
      column-gap: 20px;
      column-rule: 4px dotted rgb(79, 185, 227);
    }

    .container2 {
        column-width: 250px;
        column-gap: 20px;
    }

    .card {
        break-inside: avoid;
        page-break-inside: avoid;
        background-color: rgb(207, 232, 220);
        border: 2px solid rgb(79, 185, 227);
        padding: 10px;
        margin: 0 0 1em 0;
    }
  </style>

@code {

}
